<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8"/>
    <title>新年愿望</title>
    <link rel="stylesheet" href="index.css"/>

    <script src="dream/dream.js"></script>
    <link rel="stylesheet" href="dream/dream.css"/>

    <script src="passion/passion.js"></script>
    <link rel="stylesheet" href="passion/passion.css"/>

    <script src="smart/smart.js"></script>
    <link rel="stylesheet" href="smart/smart.css"/>

    <script src="openModel/openModel.js"></script>

    <script src="fight/fight.js"></script>
    <link rel="stylesheet" href="fight/fight.css"/>

    <style type="text/css">
        html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
        #cube {width:100%; height:100%; color:#fff;
            background:url("images/timg.jpeg") no-repeat;
            text-align:center; -webkit-perspective: 500px;perspective: 500px;}
        #openmodel{
            background:url("images/timg.jpeg") no-repeat;
        }
        #fight{
            background:url("images/timg.jpeg") no-repeat;
        }
        .text {
            text-align: center;
            vertical-align: middle;
            height: 80px;
            font-size: 50px;
            padding-top: 50%;
        }
    </style>
</head>
<body>
    <div id="cube" class="page">
        <div class="text" id="shakeText">梦想</div>
    </div>

    <div id="dream" class="page">
        <img id="dolphin" class="background" src="dream/dolphin.gif"/>
        <canvas id="dolphinMask" class="maskShow"/>
    </div>

    <div id="passion" class="page">
        <img id="flyhighpic" class="background" src="passion/flyhigh.jpg"/>
        <img class="icon" src="passion/icon1.png"/>
        <img class="icon" src="passion/icon2.png"/>
        <img class="icon" src="passion/icon3.png"/>
        <img class="icon" src="passion/icon4.png"/>
        <img class="icon" src="passion/icon5.png"/>
        <audio controls="controls" id="audioplayer" >
            Can not play the sound
        </audio>
    </div>

    <div id="idea" class="page">
    </div>

    <div id="success" class="page">
    </div>

    <div id="fighting" class="page">
    </div>

    <div id="smart" class="page">
        <img id="budala" class="background" src="smart/budala.jpg"/>
        <canvas id="mask" class="maskShow"/>
    </div>
    <div class="page" id ="openmodel">
        <canvas class="canvas" id="canvas_id" ></canvas>
    </div>

    <div class="page" id ="fight">
        <canvas class="canvas" id="canvas_fight" ></canvas>
    </div>
</body>
<script>
    var index = 0;
    var strings = new Array("梦想","激情","创意","成功","拼搏","开拓");
    // var smartPage = new SmartPage();
    // var smartPage = Object.create(SmartPage);
    var pages = new Array("cube", new Dream(), new Passion(), new Smart(), new openModel(), new fight());

    if (window.DeviceMotionEvent){
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert("不支持shake");
       // document.getElementById("shakeText").innerHTML = "Not supported on your device."
    }
    /*function copyText(){
        document.getElementById("shakeText").innerText = "测试";
    }*/

    var SHAKE_THRESHOLD = 1000;
    var SHAKE_STOP = 10;
    var last_update = 0;
    var lastShakeTime = 0;
    var lastStopShakeTime = 0;
    var isShaking = false;
    var x, y, z, last_x, last_y, last_z;
    var time;
    function startShake(){
        isShaking = true;
        if(null == time){
            gotoCube();
            gooutIndexone(index);
            time= window.setInterval(changeString, 100);
        }

    }

    function stopShake(){
        isShaking = false;
        console.log('feong stopShake=' + index);
        if(time){
            window.clearInterval(time);//clearInterval(time);
            time = null;
        }
        //go to the index one
        window.setTimeout(function(){
            gotoIndexone(index);
            gooutCube();
        }, 200);
    }

    function changeString(){
        index++;
        console.log('feong changeString=' + index+pages.length);
        if(index >= pages.length){
            index = 1;
        }
        document.getElementById("shakeText").innerText = pages[index].title;
    }

    function gotoCube() {
        document.getElementById("cube").style.display="block";
    }

    function gooutCube() {
        document.getElementById("cube").style.display="none";
    }

    function gotoIndexone(index){
        if (index == 0) return;

        if(index < pages.length){
            pages[index].unhide();
        }
    }

    function gooutIndexone(index) {
        if (index == 0) return;

        if(index < pages.length){
            pages[index].hide();
        }
    }

    function deviceMotionHandler(eventData) {
        //alert("begin shake");
        var acceleration =eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime - last_update)> 100) {
            var diffTime = curTime -last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
            if (speed > SHAKE_THRESHOLD) {
                var currentShakeTime = Date.now();
                if (currentShakeTime - lastShakeTime < 500) {
                    // continuous shake
                } else {
                    console.log('feong shake one time');
                    startShake();
                }
                lastShakeTime = currentShakeTime;
                lastStopShakeTime = currentShakeTime;
            }

            if(speed < SHAKE_STOP){
                // document.getElementById("shakeText").innerText = "stop one";
                
                var currentStopShakeTime = Date.now();
                if (currentStopShakeTime - lastStopShakeTime > 200) {
                    // stop shake for a while
                    if (isShaking){
                        // from shake to still
                        isShaking = false;
                        stopShake();
                    }
                } else {
                    console.log('feong shake one time');
                }
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }

    //gotoCube();         // For test home page.
    // gotoIndexone(1);    // For test dream page.
    //gotoIndexone(2);    // For test passion page.
    // gotoIndexone(3);    // For test smart page.
    gotoIndexone(4);
    //gotoIndexone(5);
</script>
</html>